const load = (function () {
    let loding = () => {
        $(".header").load("./header.html", function () {})
        $(".footer").load("./footer.html", function () {})
        $(".cbl").load("./cbl.html", function () {})
    }
    return {
        loding
    }
})();
$(function () {
    load.loding();
});

(function () {
    $.fn.extend({
        llbt() {
            return {
                el: null,
                imgIndex: -1,
                timer: null,
                into(ele) {
                    this.el = ele;
                    this.autoPlay();
                    this.eventHandle();
                    this.timer = setInterval(this.autoPlay.bind(this), 2500);
                    return this;
                },
                autoPlay() {
                    this.imgIndex++;
                    if (this.imgIndex == this.el.find(".ullbt li").length) {
                        this.imgIndex = 0;
                    }
                    this.el.find(".ullbt li").eq(this.imgIndex).stop().animate({
                        opacity: 1
                    }).siblings().stop().animate({
                        opacity: 0
                    })
                    this.el.find(".xt span").eq(this.imgIndex).css({
                        "backgroundColor": "red"
                    }).siblings().css({
                        "backgroundColor": "#000"
                    })
                },
                eventHandle() {
                    this.el.find(".xt span").hover((e) => {
                        clearInterval(this.timer);
                        $(e.currentTarget).css("backgroundColor", "red")
                        this.imgIndex = $(e.currentTarget).index() - 1;
                        this.autoPlay();
                    }, () => {
                        clearInterval(this.timer);
                        this.timer = setInterval(this.autoPlay.bind(this), 2500)
                    })
                    this.el.hover(() => {
                        clearInterval(this.timer);
                        $("#arr").children().css("display", "block");
                    }, () => {
                        clearInterval(this.timer);
                        this.timer = setInterval(this.autoPlay.bind(this), 2500)
                        $("#arr").children().css("display", "none");
                    })
                    this.el.children("#arr").children("#left").on("click", () => {
                        clearInterval(this.timer);
                        if (this.imgIndex == 0) {
                            this.imgIndex = this.el.children("ul").children("li").length;
                        }
                        if (this.imgIndex1 <= 0) {
                            this.imgIndex1 = this.el.children("ul").children("li").length;
                        }
                        this.imgIndex = this.imgIndex - 2;
                        this.imgIndex1 = this.imgIndex1 - 2;
                        this.autoPlay()
                    });
                    this.el.children("#arr").children("#right").on("click", () => {
                        clearInterval(this.timer);
                        this.autoPlay()
                    });
                }
            }.into(this);
        }
    })
    $.fn.extend({
        jzli() {
            var s = $(this).parent().width() / 5;
            for (var i = 0; i < $(this).find("li").length; i++) {
                $(this).find("li")[i].style.left = s * i + "px"
            }
        }
    })
    $.fn.extend({
        zy() {
            var s = 0;
            $(this).find(".y").on("click", _.throttle(function () {
                if ($(".jul3").offset().left <= 0) {
                    return;
                }
                s = s - ($(".cont-l3").width())
                $(".jul3").stop().animate({
                    "left": s
                }, 500);
            }, 500));
            $(this).find(".z").on("click", _.throttle(function () {
                console.log($(".jul3").offset().left);
                if ($(".jul3").offset().left >= 0) {
                    return;
                }
                s = s + ($(".cont-l3").width())
                $(".jul3").stop().animate({
                    "left": s
                }, 500);

            }, 500));

        }
    })
    $.fn.extend({
        tabl() {
            $(this).find("li a").mouseenter(function () {
                $(this).css("backgroundColor", "#ec4049").parent().siblings().find("a").css("backgroundColor", "#d8353d");
                $(".ejcdl").css("display", "block");
                $(".ejcdl").text($(this).parent().index());
            });
            $(this).mouseleave(function () {
                $(this).find("li>a").css("backgroundColor", "#d8353d");
                $(".ejcdl").css("display", "none");
            })
        }

    })
    $.fn.extend({
        xsyc() {
            $(this).find("li").hover(function () {
                $(this).parents(".cbl").find("span").eq($(this).index()).css({
                    "display": "block"
                }).siblings().css({
                    "display": "none"
                })
            })
        }
    })
    $.fn.extend({
        hdb() {
            $(this).on("click", () => {
                $("html,body").animate({
                    "scrollTop": 0
                }, 300);
            });
        }
    })
})()

$(function () {
    $(".lbt").llbt();
    $(".jul3").jzli();
    $(".zy").zy();
    $(".dw").tabl();
    $(".cbl").xsyc()
    $(".hdb").hdb();
})

$(window).on("load", function () {
    $(document).on("scroll", _.throttle(function () {
        let top = $(this).scrollTop();
        let ss = $(".header").height() + $(".cNav").height() + $(".lbt").height() + $(".nav-note").height()
        if (top > ss) {
            $(".dugd").css("position", "fixed").css("top", 0);
            $(".dugd").css("display", "block");
        } else {
            $(".dugd").css("position", "static");
            $(".dugd").css("display", "none");
        }
    }, 500))
})

const list = (function () {
    axios.defaults.baseURL = "";
    const loadData = async () => {
        let data = await axios({
            url: "/data/list.json"
        })
        let res = data.data;
        let strHtml = ``;
        res.forEach(el => {
            strHtml += `
            <li>
                <a href="./shopping.html?id=${el.spid}">
                    <img src="${el.img}" alt="">
                    <span class="jjs">${el.name}</span>
                    <em>${el.price}</em>
                </a>
            </li>`
        });
        $(".jul").html(strHtml);
        $(".jul").find("li").eq(0).find("span").attr("class","jjs2")
    }
    return {
        loadData
    }
})()

$(function () {
    list.loadData()
})